
<template>
  <div style="height: 100%;" :style="{overflow:(ishidden?'hidden':'auto')}" >

    <div class="ky-l-title">{{title||'学术专利'}}</div>
    <Timeline style="height: calc(100% - 50px)" v-if="linelist && linelist.length>0">
      <TimelineItem :style="{height: (litem.showinfos && litem.showinfos.length<3?'calc(50% - 20px)':'auto')}"
      v-for="(litem,idx) in linelist" :key="idx"
      >
        <template #dot><Icon type="ios-time" color="var(--first-menu-active-color)" /></template>
        <div class="ky-s-title">
          <div class="title">{{litem.year}}</div>
          <div class="more ky-gopage" @click="morelist(idx)">
            更多
            <Icon type="ios-arrow-forward" :size="14" style="margin-top: -2px;"/>
          </div>
        </div>
        <div class="certi-card">
          <div v-for="(item,index) in litem.showinfos" class="certi-item">
            <img :src="item.imageUri" v-if="item&&item.imageUri"/>
            <img :src="dimg" v-else/>
            <div class="certi-bottom">
              <div class="left-trig"></div>
              <div class="rectangle">{{item.name||''}}</div>
              <div class="right-trig"></div>
            </div>
          </div>
        </div>
      </TimelineItem>
      <TimelineItem>
        <template #dot><Icon type="ios-radio-button-on" color="rgba(29,37,44,1)" /></template>
        <span class="ky-gopage" @click="clickClassText">查看全部<Icon type="ios-arrow-forward" :size="14"/></span>
      </TimelineItem>
    </Timeline>

    <NoData v-else text="暂无数据"></NoData>
  </div>
</template>

<script>


import NoData from '@/components/common/noDataPage.vue'
import {clone} from "../achConfig";

export default {
  name: 'timeline-achieve',
  components:{NoData},
  props:['list','title','gomore','query'],
  data() {
    return {
      dimg:require('../certificate.png'),
      lists:[],
      linelist:[]
    }
  },
  watch: {
  
    list: { //路由修改后init 页面
      handler: function(newv,oldv) {
        this.init()
      },
      deep: true
    }
  },
  computed:{
    ishidden(){
      //  根据list 来算 是hidden 还是scroll
      // this.linelist[idx].showinfos 
      let flag = true
      if(this.linelist.length>2){
        flag = false
      }
      if(this.linelist && this.linelist.length>0){
        for(let i=0;i<this.linelist.length;i++){
          let item = this.linelist[i]
         
          if(item.showinfos && item.showinfos.length>2){
            return false
          }
        }
      }
      
      return flag
    }
    
  },
  

  mounted() {
    this.init();
    
  },

  methods: {
    clone(val){
      if (typeof val === 'object' && val !== null) {
        return JSON.parse(JSON.stringify(val))
      } else {
        return val
      }
    },
    
    
    morelist(idx){
      
      let showinfos = this.linelist[idx].showinfos
      let size = showinfos.length>2?2:12
      let newlist = this.linelist[idx].infos.slice(0,size)||[]
      this.linelist[idx].showinfos = newlist
      this.linelist = clone(this.linelist)
    },
    init() {
      // 1. 获取当前的page 配置
      this.active = this.$route.query.page===undefined?99:Number(this.$route.query.page)
      let list = clone(this.list)
      this.linelist = list.map(item=>{
        let info = item.infos
        item.showinfos = info.slice(0,2)
        return item
      })

    },
    more(){
      this.$emit('gomore')
    },
    clickClassText(){
      let name = this.$route.name

      // {type:1,level:'会议论文'},
      let query = this.query || {}
      let idx = query.type
      let params = {
        ...query,
        type:''
      }

      this.$router.push({name:name,query:{page:idx},params:params})
    },
  }
}
</script>
<style scoped>
.ky-l-title{
  color: var(--default-color);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}
.ky-gopage{
  color: #468dff;
  cursor: pointer;

}

.ky-s-title{
  display: flex;
  justify-content: space-between;
}
.ky-s-title .title{
  color: var(--default-color);
  font-size: 13px;
  margin-bottom: 0px;
}

.ky-gopage{
  color: #468dff;
  cursor: pointer;
}
/deep/ .ivu-timeline-item{
  padding-bottom: 6px;
}


.certi-card{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: calc(100% - 10px);
}
.certi-item{
  width: 45%;
  height: 100%;
  text-align: left;
}
.certi-item img{
  max-height: 150px;
  height: calc(20vh - 90px);
  max-width: calc(90%);
  min-height: 94px;
}
.certi-item .rectangle{
  font-size: .9em;
  width: 100%;
  padding-right: 40px;
  text-align: left;
  overflow-wrap: normal;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.certi-bottom{
  
}

</style>